<template>
  <div id="course" style="background: #fff">
    <h1>我的证书</h1>

    <div class="search">
      <div>
        <h2 style="float: left">状态:</h2>
        <meunBtn
          :meunBtnkey="search.enabledMark"
          :list="meunBtnList"
          @change="changemeun"
        ></meunBtn>

        <div class="appendinput">
          <el-input
            placeholder="请输入证书名称"
            v-model="search.name"
            class="input-with-select"
          >
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-search"
              @click="initData"
            ></el-button>
          </el-input>
        </div>
      </div>
      <div style="margin-top: 20px">
        <h2 style="float: left">来源:</h2>
        <meunBtn
          :meunBtnkey="search.resourceType"
          :list="resourceTypeBtnList"
          @change="changeResourceType"
        ></meunBtn>
      </div>
    </div>

    <div class="content" v-loading="listLoading">
      <div
        class="box"
        style="cursor: pointer"
        v-for="item in list"
        :key="item.id"
      >
        <el-image
          :ref="'certImage' + item.id"
          :src="
            define.APIURl +
            (item.cover.length > 0 ? item.cover[0].url : certDefault)
          "
          :preview-src-list="[
            ...(define.APIURl +
              (item.cover.length > 0 ? item.cover[0].url : certDefault)),
          ]"
          class="image"
        />
        <div class="info">
          <h1>{{ item.name }}</h1>
          <div class="p" style="display: flex; align-items: center">
            <span style="margin-top: 5px; display: inline-block"> 来源： </span>
            <span class="checkboxlist">
              【{{ item.resourceType | dynamicText(resourceTypeOptions) }}】{{
                item.resourceName
              }}
            </span>
          </div>
          <p class="p">
            有效期至：{{ item.expiredType == 1 ? "永久" : item.expiredDate }}
          </p>
          <p class="p">
            证书状态：{{
              item.expiredType == 1
                ? "正常"
                : new Date() > item.expiredDate
                ? "过期"
                : "正常"
            }}
          </p>
        </div>
        <div class="btn" style="width: 120px">
          <el-button type="text" @click="toDetail(item.id)">
            查看详情
          </el-button>
        </div>
      </div>
      <el-empty v-if="list.length == 0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import meunBtn from "./compents/meunBtn";
import define from "@/utils/define";
import request from "@/utils/request";
import cert_default from "@/assets/images/cert_default.jpg";

export default {
  name: "course",
  components: {
    meunBtn,
  },
  data() {
    return {
      certDefault: require("@/assets/images/cert_default.jpg"),
      listLoading: false,
      meunBtnList: [
        { name: "全部", id: "" },
        { name: "正常", id: 1 },
        { name: "已过期", id: 0 },
      ],
      resourceTypeBtnList: [
        { name: "全部", id: "" },
        { name: "课程", id: "10" },
        { name: "考试", id: "20" },
        {
          name: "专题",
          id: "30",
        },
        { name: "项目管理", id: "40" },
        { name: "新人培训", id: "50" },
        {
          name: "学习地图",
          id: "60",
        },
        { name: "在线颁发", id: "80" },
        { name: "资质证书", id: "90" },
      ],
      resourceTypeOptions: [
        { fullName: "课程", id: "10" },
        { fullName: "考试", id: "20" },
        {
          fullName: "专题",
          id: "30",
        },
        { fullName: "项目管理", id: "40" },
        { fullName: "新人培训", id: "50" },
        {
          fullName: "学习地图",
          id: "60",
        },
        { fullName: "在线颁发", id: "80" },
        { fullName: "资质证书", id: "90" },
      ],
      input3: "",
      search: {
        currentPage: 1,
        pageSize: 999,
        sidx: "",
        sort: "desc",
        enabledMark: "",
      },
      list: [],
    };
  },
  methods: {
    toDetail(id) {
      this.$refs[`certImage` + id][0].clickHandler();
    },
    changemeun(item) {
      this.search.expiredType = item.id;
      this.initData();
    },
    changeResourceType(item) {
      this.search.resourceType = item.id;
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.search,
      };
      request({
        url: `/api/course/TemsCertUser/getMyCertList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _data.cover = _data.cover ? JSON.parse(_data.cover) : [];
          _list.push(_data);
        }
        this.list = _list;
        this.listLoading = false;
      });
    },
  },
  mounted() {},
  created() {
    this.initData();
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
#course {
  .el-checkbox__input {
    .el-checkbox__inner {
      border-radius: 50% !important;
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
      text-align: center;
      font-size: 16px !important;
    }

    .el-checkbox__inner::after {
      // border: 2px solid #FFF;
      height: 8px;
      left: 5px;
      position: absolute;
      top: 2px;
      // border: 2px solid #FFF;
    }

    // .el-checkbox__inner::after {

    // }
  }

  .is-checked {
    .el-checkbox__inner {
      background-color: #44b44f !important;
      border-color: #44b44f !important;
    }

    .el-checkbox__label {
      color: #666 !important;
      font-size: 14px !important;
    }
  }
}
#course {
  padding: 20px;
  float: right;
  margin-top: 20px;
  width: 955px;
  background-color: #fff;
}

.search {
  padding-bottom: 20px;
  border-bottom: 0.5px solid #e6e6e6;
  margin-top: 20px;
  line-height: 32px;
  width: 100%;

  // display: flex;
  // justify-items: center;
  .appendinput {
    margin-top: -31px;
    width: 200px;
    float: right;
    display: flex;
  }
}

.box {
  margin-top: 30px;

  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  .image {
    width: 258px;
    height: 145px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 8px;
  }

  .info {
    width: 502px;

    .p {
      color: #666;
      font-size: 14px;
      margin: 8px 0 0 0;
      line-height: 25px;
      min-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .checkboxlist {
    display: inline-block;

    width: 400px;
    // display: flex;
    // justify-content: space-between;
  }

  .checkbox {
    float: left;
    display: inline-block;
    background-color: #f4f4f4;
    border-radius: 12px;
    margin-right: 12px;
    // margin-bottom: 12px;
    padding: 4px 8px 4px 8px;
    // padding-left: ;
    width: 108px;
    height: 30px;
    // pointer-events: none;
  }
}
</style>
